<template>
    <!-- 功能按钮组 -->
    <div class="page-container">
        <!-- 功能按钮组 -->
        <div class="button-group">
            <el-button type="primary">新增</el-button>
            <el-button type="primary">导出</el-button>
            <el-button disabled>删除</el-button>
        </div>

        <!-- 表格、分页、弹窗等原有内容 -->
    </div>

    <!-- 表格区域 -->
    <el-table :data="tableData" style="width: 100%; margin-top: 10px;" border>
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="55" label="序号" />
        <!-- 为每列指定宽度 -->
        <el-table-column prop="workShopCode" label="编码" width="120" />
        <el-table-column prop="workShopName" label="名称" width="120" />
        <el-table-column prop="description" label="描述" width="150" />
        <el-table-column prop="createId" label="创建人" width="100" />
        <el-table-column prop="createTime" label="创建时间" width="180">
            <template v-slot="scope">
                {{ scope.row.createTime.substring(0, 19).replace("T", " ") }}
            </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="180">
            <template v-slot="scope">
                {{ scope.row.updateTime?.substring(0, 19)?.replace("T", " ") || '' }}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template #default="scope">
                <!-- 用Flex让按钮横向均匀分布 -->
                <div style="display: flex; justify-content: space-around;">
                    <el-button type="success" size="small">编辑</el-button>
                    <el-button type="danger" size="small">删除</el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <div class="pagination-container">
        <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize" :page-sizes="[3, 5, 10]"
            :background="true" layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" />
    </div>

    <el-dialog v-model="icode.isapp" title="新增" width="500">
        <el-form :model="model">
            <el-form-item label="编号">
                <el-input v-model="model.workShopCode" />
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="model.workShopName" />
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="model.desciption" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="icode.isapp = false">取消</el-button>
                <el-button type="primary" @click="addshops">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import read from '@/dwrapper/axioswrapper'

// 分页参数
const page = reactive({
    pageIndex: 1,
    pageSize: 3,
    totalCount: 0,
    totalPage: 0
})

const icode = reactive({
    isapp: false
})

const model = reactive({
    workShopCode: "",
    workShopName: "",
    desciption: "",
})

// 表格数据
const tableData = ref([])

// 获取表格数据
const getshops = (params = {}) => {
    // 合并分页参数和搜索参数
    const queryParams = {
        pageIndex: page.pageIndex,
        pageSize: page.pageSize,
        ...params
    }

    read.get('/api/WorkOrders/Getwork', { params: queryParams })
        .then(res => {
            tableData.value = res.data.data.list || []
            page.totalCount = res.data.data.totalCount || 0
            page.totalPage = res.data.data.totalPage || 0
        })
        .catch(err => {
            ElMessage.error('获取数据失败')
            console.error(err)
        })
}


const addshops = () => {
    read.post('/api/WorkOrders/Addwork', model).then(res => {
        if (res.data.code == 3300) {
            ElMessage.success(res.data.message)
            getshops()
            icode.isapp = false
        } else {
            ElMessage.error(res.data.message)
        }
    })
}



watch(page, () => {
    getshops()
})

// 初始加载
onMounted(() => {
    getshops()
})
</script>

<style scoped>
/* 最外层容器：纵向排列，模块间有间距 */
.page-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* 模块之间的垂直间距 */
    padding: 16px;
    /* 页面内边距 */
}

/* 顶部按钮组右对齐 + 底部间距 */
.button-group {
    display: flex;
    margin-left: auto;
    gap: 10px;
    margin-bottom: 10px;
}

/* 分页区域右对齐 */
.pagination-container {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
}

/* 顶部操作区布局 */
.top-operation {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    gap: 10px;
}

/* 搜索区域样式 */
.search-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.search-input {
    width: 200px;
}

.search-btn {
    margin-right: 5px;
}

/* 按钮组靠右 */
.button-group {
    display: flex;
    margin-left: auto;
    /* 关键：将按钮组推到右侧 */
    gap: 10px;
}

/* 分页区域 */
.pagination-container {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
}
</style>
